<template >
<div class="big">
    <div class="head">
      <el-container>
      <el-header>
        <el-image :src="require('@/assets/img/small_logo_menu.jpg')"></el-image>
        <el-dropdown @command="commandMethods">
                    <span class="el-dropdown-link">
                    {{eusernames}}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="personal">个人信息</el-dropdown-item>
            <el-dropdown-item command="editPwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      </el-container>
    </div>
    <div class="body">
      <div class="left">
        <el-menu default-active="1-2" class="el-menu-vertical-demo" :router="true" @open="handleOpen"

                 background-color="white"
                 text-color="block"
                 active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>人事管理</span>
            </template>
            <el-menu-item-group>
              <!-- route路由 -->
              <el-menu-item index="1-1" route="/main/user">
                <!-- 图标 -->
                <template slot="title"></template>
                <el-menu-item >用户管理</el-menu-item>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="1-2" route="/main/emp">
                <template slot="title"></template>
                <el-menu-item>员工管理</el-menu-item>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="1-3" route="/main/role">
                <template slot="title"></template>
                <el-menu-item>角色管理</el-menu-item>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="2" route="/main/product">
            <i class="el-icon-menu"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>
          <el-menu-item index="3" route="/main/buy">
            <i class="el-icon-document"></i>
            <span slot="title">采购管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">审核管理</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-setting"></i>
            <span slot="title">仓库管理</span>
          </el-menu-item>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>财务管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="6-1" route="/main/user">
                <template slot="title"></template>
                <el-menu-item >财务支出</el-menu-item>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="6-2" route="/main/emp">
                <template slot="title"></template>
                <el-menu-item>财务收入</el-menu-item>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="7">
            <i class="el-icon-setting"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="right">
        <div class="down">
          <router-view> </router-view>
        </div>
      </div>
    </div>
    <div class="foot"></div>
</div>
</template>

<script>
export default {
  name: 'main',
  data () {
    return {
      editableTabsValue: '2',
      editableTabs: [{
        title: 'Tab 1',
        name: '1',
        content: 'Tab 1 content'
      }, {
        title: 'Tab 2',
        name: '2',
        content: 'Tab 2 content'
      }],
      tabIndex: 2,
      eusernames: this.$qs.parse(sessionStorage.getItem('principal')).eusername
    }
  },
  methods: {
    commandMethods (str) {
      switch (str) {
        case 'personal':
          this.$router.push({path: '/main/personal'})
          break
        case 'editPwd':
          this.$router.push({path: '/main/password'})
          break
        case 'logout':
          this.$message({
            message: '退出成功',
            type: 'warning'
          })
          this.$router.push('/')
          break
      }
    },
    addTab (targetName) {
      let newTabName = ++this.tabIndex + ''
      this.editableTabs.push({
        title: 'New Tab',
        name: newTabName,
        content: ''
      })
      this.editableTabsValue = newTabName
    },
    removeTab (targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    }
  }
}
</script>

<style scoped>
div > .el-container {
  margin-bottom: 40px;
}
.hl{
  float: left;
}
.el-header * {
  float: right;
}
.el-header{
  background-color: lavender;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.big{
  width: 1400px;
  margin-top: 0;
  background-color: brown;
}
.head {
  width: 100%;
  height: 60px;
  background-color: white;
}
.foot{
  width: 100%;
  height: 60px;
  background-color: white;
}
.body{
  width: 100%;
  height: 700px;
  background-color: yellow;
}

.left{
  width: 20%;
  height: 700px;
  background-color: white;
  float: left
}
.right{
  width: 80%;
  height: 700px;
  background-color: white;
  float: right;
}
</style>
